<template>
  <!-- 最外层页面于窗口同宽，使聊天面板居中 -->
  <el-container class="home-view">
    <!-- 整个聊天面板 -->
    <!-- 左侧的会话列表 -->
    <el-aside class="session-panel" style="--el-aside-width: 220px">
      <div style="position: relative; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
        <div style="display: inline-flex; flex-direction: column">
          <div class="title">{{ currentAINode.name }}-AI助手</div>
          <div class="description">构建你的AI助手</div>
        </div>
        <div class="home_sidebar-logo__Cd7hL no-dark" style="display: inline-flex; padding-left: 5px">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43" height="44" fill="none">
            <defs><path id="chatgpt_svg__a" d="M0 0h43v43.58H0z"></path></defs>
            <g>
              <mask id="chatgpt_svg__b" fill="#fff"><use xlink:href="#chatgpt_svg__a"></use></mask>
              <g mask="url(#chatgpt_svg__b)">
                <path
                  fill-rule="evenodd"
                  d="M40.17 17.84c.36-1.11.55-2.27.55-3.43 0-1.93-.51-3.83-1.49-5.49a10.98 10.98 0 0 0-9.52-5.51c-.77 0-1.55.08-2.3.24A10.868 10.868 0 0 0 19.29 0h-.1c-4.76 0-8.98 3.07-10.45 7.6-3.06.63-5.71 2.55-7.26 5.27a10.993 10.993 0 0 0 1.35 12.87c-.36 1.11-.55 2.27-.55 3.43 0 1.93.51 3.83 1.49 5.49a10.97 10.97 0 0 0 11.82 5.27c2.06 2.32 5.02 3.65 8.12 3.65h.1c4.76 0 8.99-3.07 10.45-7.61a10.82 10.82 0 0 0 7.26-5.26 10.995 10.995 0 0 0-1.35-12.87ZM18.817 38.695c-.09.05-.17.1-.26.15a8.145 8.145 0 0 0 5.22 1.89h.01c4.5-.01 8.15-3.67 8.16-8.17v-10.13a.153.153 0 0 0-.07-.1l-3.67-2.12v12.24c0 .51-.27.98-.72 1.23l-8.67 5.01Zm-1.424-2.472 8.77-5.06c.04-.03.06-.07.06-.11h-.01v-4.24l-10.59 6.12c-.44.25-.98.25-1.42 0l-8.68-5.01c-.08-.05-.2-.12-.26-.16a8.19 8.19 0 0 0 .97 5.47 8.18 8.18 0 0 0 7.08 4.08c1.43 0 2.84-.37 4.08-1.09Zm-9.187-25.21v-.3c-1.79.66-3.3 1.93-4.25 3.58a8.226 8.226 0 0 0-1.09 4.08c0 2.92 1.55 5.61 4.08 7.07l8.77 5.07c.04.02.09.02.12-.01l3.67-2.12-10.59-6.11c-.44-.25-.71-.72-.71-1.23v-10.03Zm27.849 7.117-8.77-5.07a.126.126 0 0 0-.12.01l-3.67 2.12 10.59 6.12c.44.25.71.71.71 1.22v10.33a8.168 8.168 0 0 0 5.35-7.66 8.16 8.16 0 0 0-4.09-7.07Zm-19.22-5.718a.16.16 0 0 0-.05.11v4.24l10.59-6.12c.22-.12.47-.19.72-.19s.49.07.71.19l8.68 5.02c.08.05.17.1.25.15.08-.46.12-.92.12-1.38 0-4.51-3.66-8.17-8.17-8.17-1.43 0-2.83.38-4.08 1.09l-8.77 5.06ZM19.22 2.85c-4.51 0-8.17 3.65-8.17 8.16v10.13c.01.05.03.08.07.1l3.67 2.12.01-12.23v-.01c0-.5.27-.97.71-1.22l8.68-5.01c.07-.05.19-.11.25-.15a8.145 8.145 0 0 0-5.22-1.89ZM16.783 24.51l4.72 2.73 4.72-2.73v-5.45l-4.72-2.72-4.72 2.73v5.44Z"
                  opacity="0.27"
                  style="fill: rgb(139, 202, 224)"
                ></path>
              </g>
            </g>
          </svg>
        </div>
      </div>

      <!-- 会话列表 -->
      <div class="session-list">
        <!-- for循环遍历会话列表用会话组件显示，并监听点击事件和删除事件。点击时切换到被点击的会话，删除时从会话列表中提出被删除的会话。 -->
        <!--  -->
        <ChatCard
          v-for="(session, index) in sessionList"
          :key="session.id"
          :active="session.id === activeSession.id"
          :session="sessionList[index]"
          class="session"
          @click="handleSessionSwitch(session)"
          @delete="handleDeleteSession"
        ></ChatCard>
      </div>
      <div class="button-wrapper">
        <!-- <div class="clear-session">
          <el-tooltip class="box-item" effect="dark" content="新的聊天" placement="top">
            <el-icon><CirclePlus /></el-icon>
          </el-tooltip>

          <el-button @click="handleClearSession" icon="el-icon-delete"> 清除聊天 </el-button>
        </div> -->
        <div class="new-session">
          <el-button
            @click="handleCreateSession"
            round
            icon="el-icon-circle-plus"
            style="
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px;
              cursor: pointer;
              transition: all 0.3s ease;
              overflow: hidden;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
              outline: none;
              border: none;
            "
            class="new-session-btn"
          >
            <!-- color: var(--black); -->
            <!-- color="#f3f3f3" -->
            新的聊天
          </el-button>
        </div>
      </div>
    </el-aside>
    <!-- 右侧的消息记录 -->
    <el-container class="message-panel">
      <!-- 会话名称 -->
      <el-header class="header">
        <div class="front">
          <!-- 如果处于编辑状态则显示输入框让用户去修改 -->
          <div v-if="isEdit" class="title">
            <!-- 按回车代表确认修改 -->
            <el-input v-model="activeSession.topic" @keydown.enter="handleUpdateSession"></el-input>
          </div>
          <!-- 否则正常显示标题 -->
          <div v-else class="title">
            {{ activeSession.topic }}
          </div>
          <div class="description">与ChatGPT的{{ activeSession.messages.length }}条对话</div>
        </div>
        <!-- 尾部的编辑按钮 -->
        <div class="rear">
          <el-icon :size="20" @click="isEdit = true" style="cursor: pointer" v-if="!isEdit">
            <EditPen />
          </el-icon>
          <el-icon :size="20" style="cursor: pointer" @click="isEdit = false" v-else>
            <CircleClose />
          </el-icon>
        </div>
      </el-header>
      <el-main class="message-list" @wheel="scrollEventHandle">
        <!-- 过渡效果 -->
        <transition-group name="list">
          <ChateMssageRow
            v-for="(message, index) in activeSession.messages"
            :key="message.messageId + index"
            :avatar="activeSession.avatar"
            :message="message"
            @loadIsOk="handleLoadImage"
          ></ChateMssageRow>
        </transition-group>
      </el-main>
      <!-- 快捷操作 -->
      <div class="message-operate">
        <el-row class="file-list-items" style="min-height: 20px; vertical-align: middle" v-for="(item, index) in fileList" :key="index">
          <el-col :span="22">{{ item.name }}</el-col>
          <el-col :span="2" style="cursor: pointer" @click="handleDeleteFile(item)">
            <el-icon><Delete /></el-icon>
          </el-col>
        </el-row>

        <el-row style="display: flex; flex-wrap: wrap; padding-bottom: 6px">
          <el-upload
            :file-list="fileList"
            class="upload-demo"
            action=""
            ref="uploadRef"
            :auto-upload="false"
            :limit="1"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            accept=".jpg, .png"
            :show-file-list="false"
          >
            <el-tooltip class="box-item" effect="dark" content="支持上传文件，接收图片" placement="top">
              <div style="width: 28px; cursor: pointer; height: 28px; background: url(img/upload_file_btn_hover.2816b155.svg) no-repeat"></div>
            </el-tooltip>
          </el-upload>
        </el-row>
        <!-- 监听发送事件 -->
        <ChateMssageInput @send="handlerAiSendMessage" :start="sendStarting" class="message-input"></ChateMssageInput>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import { CircleClose, EditPen, Delete, CirclePlus } from '@element-plus/icons-vue';
import ChatCard from './components/ChatCard';
import ChateMssageRow from './components/MessageRow';
import ChateMssageInput from './components/MessageInput';
import openAiTool from '../../utils/openaiTool.js';
import { genFileId } from 'element-plus';
export default {
  name: 'AiGenerate',
  components: {
    CircleClose,
    EditPen,
    ChatCard,
    ChateMssageRow,
    ChateMssageInput,
    Delete,
    CirclePlus,
  },
  props: {
    aiNode: Object, // ai node  里面是  {dataDicId name type 等信息}
    aiType: String, // ai 的类型
  },
  data() {
    return {
      sessionList: [],
      activeSession: { id: '', messages: [], stamp: 0 },
      isEdit: false,
      chatTimestamp: 0,
      activeMessageCount: 0,
      activeScrollEnd: false,
      currentAINode: {
        name: '',
        dataDicId: '',
        type: '',
      },
      sendStarting: false,
      fileList: [],
      fileId: '',
      path: '',
      imageBase64: '',
      showFileList: false,
      fileListBase64: [],
      currentId: '',
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.currentId = this.$route.query.id;
      let response = await this.$API.aiApplication.page.get({
        page: 1,
        pageSize: 100000,
      });
      let list = response.data.rows;
      if (!list || list.length <= 0) {
        // 这里开始
        return;
      }

      // 开始渲染
      list.forEach(item => {
        if (this.currentId && item.id == this.currentId) {
          var o = {
            code: item.chatType,
            dataDicType: 'keyvalue',
            dataDicId: item.id,
            children: [],
            name: item.name,
            type: item.chatType,
          };
          console.log('o', o);
          this.currentAINode = o;
        }
      });
      console.log(this.currentAINode);
      this.loadSessionList();
      if (this.aiNode) this.currentAINode = this.aiNode;
    },

    scrollEventHandle() {
      this.activeScrollEnd = false;
    },
    /**
     * 加载 session list
     */
    async loadSessionList() {
      // 上报到接口
      this.sessionList = [];
      if (!this.currentAINode || this.currentAINode.dataDicId == '') return;
      var response = await this.$API.open.dialogList.post(this.currentAINode.dataDicId, this.currentAINode.type);
      var list = response.data;
      if (list.length > 0) {
        list.forEach(item => {
          this.sessionList.push({
            id: item.id,
            topic: item.name,
            applicationId: item.applicationId,
            modificationTime: item.modificationTime,
            chatCount: item.chatCount,
            messages: [],
            active: false,
          });
        });
        this.activeSession = this.sessionList[0];
        await this.loadSessionMessages();
      }
    },
    // 加载 聊天记录
    async loadSessionMessages() {
      //
      if (this.activeSession != null) {
        var response = await this.$API.open.recordList.post(this.activeSession.id);
        this.activeSession.messages = [];
        if (response.data.length > 0) {
          response.data.forEach(item => {
            this.activeSession.messages.push({
              messageId: item.id,
              content: item.question,
              sourceId: '',
              type: 'question',
              role: item.role,
              dialogId: item.dialogId,
              aiType: item.aiType,
              finish: true,
              image: item.images.length > 0 ? item.images[0] : '',
              webSearch: item.webSearch.length > 0 ? item.webSearch : null,
              sourceFiles: item.sourceFiles.length > 0 ? item.sourceFiles : null,
              videos: item.videos.length > 0 ? item.videos : null,
            });

            // 然后 滚动到底部
            this.$nextTick(() => {
              this.activeScrollEnd = true;
              this.handleLoadImage();
              this.activeScrollEnd = false;
            });
          });
        }
      }
    },
    // 清除聊天记录
    handleClearSession() {
      let len = this.sessionList.length;
      if (len == null || len <= 0) {
        return;
      }
      let copyObj = this.$TOOL.objCopy(this.sessionList);
      copyObj.forEach(item => {
        this.handleDeleteSession(item);
      });
      this.activeSession = { id: '', messages: [] };
    },
    /**
     *当鼠标放到会话上时，会弹出删除图标，点击删除图标调用删除接口并发送删除事件。
     * @param session session
     */
    async handleDeleteSession(session) {
      const index = this.sessionList.findIndex(value => {
        return value.id === session.id;
      });
      this.sessionList.splice(index, 1);
      // 上报到接口
      await this.$API.open.dialogRemove.post(session.id);
      if (this.activeSession != null && this.activeSession.id == session.id) {
        this.activeSession.messages = [];
      }
    },
    /**
     * 创建卡片
     */
    async handleCreateSession() {
      const res = {
        applicationId: this.currentAINode.dataDicId,
        id: '1',
        topic: '新的聊天',
        chatCount: 0,
        messages: [],
        modificationTime: this.$TOOL.dateFormat(new Date()),
        active: true,
        aiType: this.currentAINode.type,
      };
      // 上报到接口
      var response = await this.$API.open.dialogCreate.post({
        id: res.id,
        chatCount: res.chatCount,
        name: res.topic,
        aiType: res.aiType,
        applicationId: res.applicationId,
      });
      if (response.code == 200) {
        res.id = response.data;
        this.sessionList.unshift(res);
        // 其他的置为  active false
        this.handleUpdateActive(res.id);
      } else {
        this.$alert(response.message, '提示', { type: 'error' });
      }
      this.activeSession = res;
      this.activeMessageCount = this.activeSession.messages.length;
      await this.loadSessionMessages();
    },
    /**
     * 激活状态
     * @param id id
     */
    handleUpdateActive(id) {
      this.sessionList.forEach(item => {
        if (item.id != id) {
          item.active = false;
        }
      });
    },
    /**
     * 卡片的切换
     * @param session session
     */
    async handleSessionSwitch(session) {
      this.activeSession = session;
      if (this.activeSession == null) {
        const uniqueId = this.$TOOL.idHelper.generate();
        this.activssioeSen = { id: uniqueId, messages: [] };
      }
      // 其他的置为  active false
      this.handleUpdateActive(this.activeSession.id);
      await this.loadSessionMessages();
    },
    /**
     * 更新对话卡片信息
     */
    async handleUpdateSession() {
      this.isEdit = false;
      var session = this.sessionList.filter(x => x.id == this.activeSession.id).shift();
      if (session == null) {
        return;
      }
      session.topic = this.activeSession.topic;
      // 上报到接口
      await this.$API.open.dialogUpdate.post({
        id: session.id,
        chatCount: session.chatCount,
        name: session.topic,
      });
    },
    // 更新对话数量
    async updateSessionListChatCount() {
      var session = this.sessionList.filter(x => x.id == this.activeSession.id).shift();
      if (session == null) return;

      session.chatCount = this.activeSession.messages.length;
      if (this.activeMessageCount >= this.activeSession.messages.length) {
        console.log('[updateSessionListChatCount]消息不更新api');
        return;
      }
      // 上报到接口
      await this.$API.open.dialogUpdate.post({
        id: session.id,
        chatCount: session.chatCount,
        name: session.topic,
      });
    },
    async handlerAiSendMessage(message) {
      if (this.currentAINode == null) {
        this.message.error('请先选择应用！');
        return;
      }

      if (!this.activeSession || this.activeSession.id == '') {
        await this.handleCreateSession();
      }
      this.sendStarting = true;
      this.activeScrollEnd = true;
      await this.handleSendMessage(message);
    },
    /**
     * 发送消息
     * @param message  消息
     */
    async handleSendMessage(message) {
      // 发送消息
      // 追加结果数据
      // 将图片转换
      const uniqueId = this.$TOOL.idHelper.generate();
      var request = {
        messageId: uniqueId,
        image: this.imageBase64,
        content: message.message,
        sourceId: '',
        type: 'question',
        role: 'user',
        aiType: 'chat',
        dialogId: this.activeSession.id,
        applicationId: this.currentAINode.dataDicId,
        finish: true,
        fileId: this.fileId,
        path: this.path,
      };
      // 追加一个问题用的消息数据
      this.activeSession.messages.push(request);
      this.clearUploadFileHandler();
      // 回复用的id
      // 追加一个回复用的消息数据
      var assistanRequest = {
        messageId: this.$TOOL.idHelper.generate(),
        content: '',
        sourceId: '',
        type: 'answer',
        role: 'assistant',
        aiType: this.currentAINode.type,
        dialogId: this.activeSession.id,
        applicationId: this.currentAINode.dataDicId,
        finish: false,
      };
      this.activeSession.messages.push(assistanRequest);

      this.activeMessageCount = this.activeSession.messages.length;
      if (this.currentAINode && this.currentAINode.type == 'images') {
        await this.handleSendImagesMessage(assistanRequest.messageId, request);
      } else if (this.currentAINode && this.currentAINode.type == 'videos') {
        await this.handleSendVideoMessage(assistanRequest.messageId, request);
      } else {
        this.chatTopicGenerate();
        await this.handleSendChatMessage(assistanRequest.messageId, request);
      }
    },
    /**
     * 发送 文生图的消息
     * @param id  消息的id
     * @param message  消息的内容
     */
    async handleSendImagesMessage(id, message) {
      await this.$API.open.imagesGenerate.post(
        id,
        this.activeSession.id,
        this.currentAINode.dataDicId,
        { prompt: message.content },
        this.renderImagesNew,
        this.successChat,
        this.errorChat
      );
    },
    /**
     * 生成对话主题
     */
    async chatTopicGenerate() {
      // 发送消息
      // 追加结果数据
      if (this.activeSession.messages.length > 2) {
        return;
      }
      // 如果是2 的话，那么判断最后一个是否是空格的content
      let chatMessage = this.activeSession.messages.concat();
      chatMessage = chatMessage.filter(x => x.content != '' && x.content != undefined);
      if (chatMessage.length > 1) {
        return;
      }
      await this.$API.open.topicGenerate.post(
        this.currentAINode.dataDicId,
        this.activeSession.id,
        chatMessage,
        val => {
          openAiTool.data.renderTopic(val, this.activeSession, callback => {
            // 更新topic
            console.log('对话 topic,', callback, this.activeSession.topic);
            //
            this.activeSession.topic = this.activeSession.topicGenerate;
            this.handleUpdateSession();
          });
        },
        this.successChat,
        this.errorChat
      );
    },
    /**
     * 发送 文生视频的消息
     * @param id 消息的id
     * @param message 消息的内容
     */
    async handleSendVideoMessage(id, message) {
      await this.$API.open.videosGenerate.post(
        id,
        this.activeSession.id,
        this.currentAINode.dataDicId,
        { prompt: message.content, image_url: message.image, fileId: message.fileId, path: message.path },
        this.renderVideos,
        this.successChat,
        this.errorChat
      );
    },
    /**
     * 发送对话消息
     * @param id 消息的id
     */
    async handleSendChatMessage(id) {
      // 发送消息
      // 追加结果数据
      const chatMessage = this.activeSession.messages.concat();
      this.activeMessageCount = this.activeSession.messages.length;
      await this.$API.open.chat.post(
        this.currentAINode.dataDicId,
        id,
        this.activeSession.id,
        chatMessage,
        this.renderChatNew,
        this.successChat,
        this.errorChat
      );
    },
    // 提交聊天记录  chat ai 结束
    async sumitChatDoneMessage() {
      var el = this.activeSession.messages.at(this.activeSession.messages.length - 1);
      el.finish = true;
      var m = this.activeSession.messages.slice(-1)[0];
      let content = '';
      // 需要处理 content
      let images = [];
      if (m.image) {
        images.push(m.image);
      }
      content += m.content;
      await this.$API.open.addRecord.post({
        messageId: m.messageId,
        question: content,
        applicationId: this.activeSession.applicationId,
        dialogId: this.activeSession.id,
        role: m.role,
        aiType: m.aiType,
        images: images,
        webSearch: m.webSearch,
        sourceFiles: m.sourceFiles,
        videos: m.videos,
      });
    },
    async renderImagesNew(val) {
      openAiTool.data.renderImagesGLM(val, this.activeSession, this.renderCallback, this.renderCheckStatmp);
    },
    async renderVideos(val) {
      openAiTool.data.renderVideos(val, this.activeSession, this.renderCallback, this.renderCheckStatmp);
    },
    async renderChatNew(val) {
      openAiTool.data.renderGLM(val, this.activeSession, this.renderCallback, this.renderCheckStatmp);
    },
    renderCallback(action, val) {
      if (action == 'updateChatTimestamp') {
        this.chatTimestamp = val;
      } else if (action == 'submitChatDone') {
        this.sendStarting = false;
        this.sumitChatDoneMessage();
      }
    },
    renderCheckStatmp(val) {
      return this.chatTimestamp < val;
    },

    errorChat() {
      this.sendStarting = false;
      this.message.error('出现异常，请重试');
    },
    clearUploadFileHandler() {
      this.fileList = [];
      this.fileId = '';
      this.path = '';
      this.imageBase64 = '';
      this.fileListBase64 = [];
      this.$refs.uploadRef.clearFiles();
    },
    handleLoadImage() {
      if (this.activeScrollEnd) {
        let x = document.getElementsByClassName('message-list')[0];

        if (x == null || x.scrollHeight == null) {
          return;
        }
        x.scrollTop = x.scrollHeight; //将滚轮置底
      }
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      this.uploadFile();
    },
    handleExceed(files) {
      this.$refs.uploadRef.clearFiles();
      this.fileList = [];
      let file = files[0];
      file.uid = genFileId();
      this.$refs.uploadRef.handleStart(file);
    },
    async uploadFile() {
      if (this.fileList.length < 1) return;
      let response = await this.$API.upload.upload3.post(this.fileList[0].raw);

      if (response.code != 200) {
        this.$message.error(response.message);
        return;
      }
      this.path = response.data.url;
      this.fileId = response.data.fileId;
      var that = this;
      that.imageBase64 == null;
      await this.$TOOL.image.imageToBase64(this.fileList[0].raw).then(res => {
        that.imageBase64 = res;
        that.fileListBase64.push({ name: this.fileList[0].name });
        that.showFileList = true;
      });

      this.$message.success('上传成功');
    },
    handleDeleteFile() {
      this.clearUploadFileHandler();
    },
  },
  watch: {
    activeSession: {
      handler() {
        this.$nextTick(() => {
          this.handleLoadImage();
          this.updateSessionListChatCount();
        });
      },
      immediate: true,
      deep: true,
    },
    aiNode: {
      handler(newValue, oldValue) {
        this.currentAINode = newValue;

        if (newValue != oldValue) this.loadSessionList();
      },
      immediate: false,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.message-operate {
  position: relative;
  width: 100%;
  padding: 10px 20px 20px;
  box-sizing: border-box;
  border-top: 1px solid #dedede;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
}

.home-view {
  .session-panel {
    top: 0;
    width: var(--sidebar-width);
    box-sizing: border-box;
    padding: 20px;
    background-color: #e7f8ff;
    display: flex;
    flex-direction: column;
    box-shadow: inset -2px 0 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    transition: width 0.05s ease;

    /* 标题*/
    .title {
      margin-top: 20px;

      font-size: 20px;
      font-weight: 700;
      animation: home_slide-in__h1Bn_ 0.3s ease;
    }
    /* 描述*/
    .description {
      color: rgba(black, 0.7);
      font-size: 10px;
      margin-top: 10px;
    }
    .session-list {
      flex: 1 1;
      overflow: auto;
      overflow-x: hidden;

      .session {
        /* 每个会话之间留一些间距 */
        margin-top: 20px;
      }
    }

    .button-wrapper {
      display: flex;
      justify-content: space-between;
      padding-top: 20px;

      /* 按钮于右侧边界留一些距离 */
      .new-session {
        margin-right: 5px;
        margin-left: auto;
      }
      /* clear session */
      .clear-session {
        margin-right: 5px;
      }
    }
  }
  /* 右侧消息记录面板*/
  .message-panel {
    .header {
      /* 前部的标题和消息条数 */
      .front {
        .title {
          color: rgba(black, 0.7);
          font-size: 20px;
        }

        .description {
          margin-top: 10px;
          color: rgba(black, 0.5);
        }
      }
      /* 尾部的编辑和取消编辑按钮 */
      .rear {
        display: flex;
        align-items: center;
      }
    }

    .message-list {
      flex: 1 1;
      position: relative;
      // height: 546px;
      padding: 15px;
      // 消息条数太多时，溢出部分滚动
      overflow-y: auto;
      overflow-x: hidden;
      // 当切换聊天会话时，消息记录也随之切换的过渡效果
      .list-enter-active,
      .list-leave-active {
        transition: all 0.5s ease;
      }
      .list-enter-from,
      .list-leave-to {
        opacity: 0;
        transform: translateX(30px);
      }
    }
  }
}
.file-list-items:hover {
  background-color: #f5f7fa;
  color: var(--el-color-primary);
}
:deep(.new-session-btn:hover) {
  background-color: #f3f3f3;
  //   color: #f3f3f3;
}
</style>
